<template>
  <div class="parent-component">
    <h2>双选卡片组件示例</h2>
    <dual-selection-card 
      :initial-unassigned-list="unassignedData"
      :initial-assigned-list="assignedData"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DualSelectionCard from '@/components/commons/card/index.vue'

// 准备要传递给子组件的数据
const unassignedData = ref([
  { id: 1, category: '保健分类A', displayName: '展示名称1' },
  { id: 2, category: '保健分类B', displayName: '展示名称2' },
  { id: 3, category: '保健分类C', displayName: '展示名称3' }
])

const assignedData = ref([
  { id: 4, category: '保健分类D', displayName: '展示名称4' }
])
</script>

<style scoped>
.parent-component {
  padding: 20px;
}
</style>